<template>
  <el-dialog
    append-to-body
    :title="form.name"
    :visible.sync="dialogVisible"
    width="1400px"
  >
    <vxe-form
      :data="form"
      :items="formConfig.items"
      :rules="formConfig.rules"
      :title-align="formConfig.titleAlign"
      title-colon
      :title-width="formConfig.titleWidth"
      @submit="submit"
    >
      <template #cat>
        <el-input v-model="form.cat" clearable placeholder="品种" />
      </template>
      <template #temp>
        <el-input v-model="form.temp" clearable placeholder="有效温度">
          <template slot="append">℃</template>
        </el-input>
      </template>
      <template #growthes>
        <vxe-table align="center" border :data="form.cropGrowthes" size="small">
          <vxe-column field="name" title="名称" width="160">
            <template #default="{ row }">
              <el-input
                v-model="row.stage_name"
                clearable
                placeholder="名称"
                size="small"
              />
            </template>
          </vxe-column>
          <vxe-column field="max" title="起止时间" width="380">
            <template #default="{ row }">
              <el-date-picker
                v-model="row.daterange"
                end-placeholder="结束日期"
                range-separator="~"
                start-placeholder="开始日期"
                type="daterange"
                value-format="yyyy-MM-dd"
              />
            </template>
          </vxe-column>
          <vxe-column field="max" title="灌水上限">
            <template #default="{ row }">
              <el-input
                v-model="row.wc_max"
                placeholder="灌水上限"
                size="small"
                type="number"
              >
                <template slot="append">%</template>
              </el-input>
            </template>
          </vxe-column>
          <vxe-column field="min" title="灌水下限">
            <template #default="{ row }">
              <el-input
                v-model="row.wc_min"
                placeholder="灌水下限"
                size="small"
                type="number"
              >
                <template slot="append">%</template>
              </el-input>
            </template>
          </vxe-column>
          <vxe-column field="depth" title="湿润层深度">
            <template #default="{ row }">
              <el-input
                v-model="row.soil_depth"
                placeholder="湿润层深度"
                size="small"
                type="number"
              >
                <template slot="append">mm</template>
              </el-input>
            </template>
          </vxe-column>
          <vxe-column field="kunit" title="作物系数">
            <template #default="{ row }">
              <el-input
                v-model="row.kunit"
                clearable
                placeholder="作物系数"
                size="small"
                type="number"
              />
            </template>
          </vxe-column>
          <vxe-column field="operate" title="操作" width="100">
            <template #default="{ row, $index }">
              <el-link type="danger" @click="deleteRow(row, $index)">
                删除
              </el-link>
            </template>
          </vxe-column>
        </vxe-table>
      </template>
    </vxe-form>
  </el-dialog>
</template>

<script>
  import { deepClone } from '@/utils'
  import { updateCrop } from '@/api/device'
  import { mapGetters } from 'vuex'
  export default {
    data() {
      return {
        dialogVisible: false,
        dclassOptions: [
          { label: '高', value: 1 },
          { label: '中', value: 2 },
          { label: '低', value: 3 },
        ],
        catOptions: [
          { label: '品种1号', value: 1 },
          { label: '品种2号', value: 2 },
        ],
        form: {
          temp: '',
          cat: '',
          cropGrowthes: [],
        },
        formConfig: {
          titleWidth: 110,
          titleAlign: 'right',
          items: [
            {
              field: 'cat',
              title: '品种',
              span: 8,
              slots: { default: 'cat' },
            },
            {
              field: 'temp',
              title: '有效温度',
              span: 8,
              slots: { default: 'temp' },
            },
            {
              field: 'flstep',
              title: '生育期',
              span: 24,
              slots: { default: 'growthes' },
            },
            {
              field: 'descri',
              title: '介绍',
              span: 24,
              itemRender: {
                name: '$input',
                rows: 4,
                props: {
                  type: 'textarea',
                  placeholder: '速效钾(%)',
                  clearable: true,
                },
              },
            },
            {
              span: 24,
              align: 'left',
              className: 'pl110',
              itemRender: {
                name: '$buttons',
                children: [
                  {
                    props: {
                      type: 'submit',
                      content: '提交',
                      icon: 'vxe-icon-search',
                      status: 'primary',
                    },
                  },
                  {
                    props: {
                      type: 'reset',
                      content: '重置',
                      icon: 'el-icon-document',
                    },
                  },
                ],
              },
            },
          ],
          rules: {
            name: [{ required: true, message: '请输入名称' }],
          },
        },
      }
    },
    computed: {
      ...mapGetters(['plant']),
    },
    methods: {
      show(row) {
        console.log(this.plant)
        this.dialogVisible = true
        this.form = deepClone(row)
        this.form.cropGrowthes = this.plant.cropGrowthes.map((val) => {
          val.daterange = [val.stage_start, val.stage_end]
          return val
        })
      },
      async submit() {
        const { msg } = await updateCrop(this.form.id, this.form)
        this.$baseMessage(msg, 'success', 'vab-hey-message-success')
        this.dialogVisible = false
        this.$emit('getCrops')
      },
      deleteRow(index) {
        console.log(index)
        this.form.cropGrowthes.splice(index, 1)
      },
    },
  }
</script>

<style lang="scss" scoped></style>
